<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p ref="pDom">{{msg}}</p>
        <input type="button" value="给msg变量赋值" @click="changeMsg()">
        <hr>
        <p>{{info}}</p>
        <input type="text" v-model="info">
        <input type="button" value="开启watch监控" @click="openWatch()">
        <input type="button" value="关闭watch监控" @click="closeWatch()">
        <hr>
        <p>user:{{user}}</p>
        <input type="text" v-model="user.name">
        <input type="text" v-model="user.age">
        <input type="text" v-model="user.hobby">
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"初始变量",
            info:"info变量",
            user:{
                name:"iboy",
                age:20,
                hobby:"lol"
            }
        },
        methods:{
            changeMsg(){
                var temp1=this.$refs.pDom.innerHTML;
                console.log("变量改变之前",temp1);
                this.msg="方法改变后的变量";
                // setTimeout(()=>{
                //     var temp2=this.$refs.pDom.innerHTML;
                //     console.log("变量改变之后",temp2);
                // },1000);
                // this.$nextTick(function(){
                //     var temp2=this.$refs.pDom.innerHTML;
                //     console.log("变量改变之后",temp2);
                // })
                // this.$nextTick(()=>{
                //     var temp2=this.$refs.pDom.innerHTML;
                //     console.log("变量改变之后",temp2);
                // })
                Vue.nextTick(()=>{
                    var temp2=this.$refs.pDom.innerHTML;
                    console.log("变量改变之后",temp2);
                })
            },
            openWatch(){
                this.$unwatch=this.$watch("info",function(nv,ov){
                    console.log("info变量发生变化",nv,ov);
                })
            },
            closeWatch(){
                this.$unwatch();
            }
        }
    })
    // var unwatch=vm.$watch("info",function(nv,ov){
    //     console.log("info变量发生变化",nv,ov);
    // });
    // setTimeout(function(){
    //     unwatch();       
    // },3000);
    var unwatch=vm.$watch(function(){
        // return this.user.age+this.user.hobby;
        // return [this.user.age,this.user.hobby];
        return {age:this.user.age,hobby:this.user.hobby};
    },function(nv,ov){
        console.log("user变量中的age和hobby发生变化",nv,ov);
    })
</script>
</html>